<template>
    <div class="balance_page">
        <div>
            <topnav pageindex="2"></topnav>
        </div>
        <div class="maindata">
            <div class="tbwrap">
                <el-table
                    :data="showData"
                    border
                    v-loading="showloading"
                    element-loading-text="拼命加载中"
                    style="width: 100%">
                    <el-table-column
                        label="时间">
                        <template scope="scope">
                            <span>{{api.dateFormat((new Date()).getTime(),"yyyy-MM-dd hh:mm:ss")}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="cointype"
                        label="币种">
                    </el-table-column>
                    <el-table-column
                        prop="wbalance"
                        label="挖矿钱包余额">
                    </el-table-column>
                    <el-table-column
                        prop="pwbalance"
                        label="支付钱包余额">
                    </el-table-column>
                    <el-table-column
                        prop="unbalance"
                        label="未支付余额">
                    </el-table-column>
                    <el-table-column
                        prop="needpaidbalance"
                        label="需要支付快照">
                        <el-table-column
                            label="快照日期">
                            <template scope="scope">
                                <span>{{scope.row.needpaidbalance&&api.dateFormat(scope.row.needpaidbalance.timeStamp,"yyyy-MM-dd hh:mm:ss")}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="needpaidbalance.walletBalance"
                            label="挖矿钱包余额">
                        </el-table-column>
                        <el-table-column
                            prop="needpaidbalance.payWalletBalance"
                            label="支付钱包余额">
                        </el-table-column>
                        <el-table-column
                            prop="needpaidbalance.unpaidBalance"
                            label="需要支付余额">
                        </el-table-column>
                        <el-table-column
                            prop="needpaidbalance.notReachThresBalance"
                            label="沉淀金额">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column
                        label="更多"
                        class-name="btnscol"
                        width="100">
                        <template scope="scope">
                            <el-row>
                                <el-col :span="20" :offset="2">
                                    <el-button :plain="coin!=scope.row.cointype" type="success" @click="detailCoin(scope.row.cointype)">详情</el-button>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <transition name="el-zoom-in-top">
                <div v-show="showDetail" class="detail_wrap">
                    <div class="history_wrap">
                        <div class="tits">
                            {{coin}}&nbsp;收益历史纪录
                        </div>
                        <div class="history_main">
                            <el-table
                                :data="historyData"
                                style="width: 100%"
                                @expand="changeHistory"
                                highlight-current-row
                                show-summary>
                                <el-table-column type="expand">
                                    <template scope="props">
                                        <div style="margin:5px;">
                                            <el-table
                                                :data="hisDetail"
                                                height="500"
                                                style="width: 100%">
                                                <el-table-column
                                                    label="时间">
                                                    <template scope="scope">
                                                        {{api.dateFormat(scope.row.logTime,"yyyy-MM-dd hh:mm:ss")}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    prop="height"
                                                    label="高度">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="revenuePps"
                                                    label="PPS支出">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="revenuePplns"
                                                    label="PPLNS收益">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="revenueDiff"
                                                    label="收益差额">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="poolFree"
                                                    label="矿池手续费">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="date"
                                    sortable
                                    label="日期">
                                </el-table-column>
                                <el-table-column
                                    prop="balance"
                                    sortable
                                    label="挖矿钱包余额">
                                </el-table-column>
                                <el-table-column
                                    prop="payBalance"
                                    sortable
                                    label="支付钱包余额">
                                </el-table-column>
                                <el-table-column
                                    prop="revenuePps"
                                    sortable
                                    label="矿工支出">
                                </el-table-column>
                                <el-table-column
                                    prop="revenuePplns"
                                    sortable
                                    label="PPLNS收益">
                                </el-table-column>
                                <el-table-column
                                    prop="revenueDiff"
                                    sortable
                                    label="收益差额">
                                </el-table-column>
                                <el-table-column
                                    prop="poolFee"
                                    sortable
                                    label="矿池手续费">
                                </el-table-column>
                                <el-table-column
                                    prop="realDiff"
                                    sortable
                                    label="纯收益">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="payments_wrap">
                        <div class="tits">
                            <span>{{coin}}&nbsp;转账记录</span>
                            <span style="margin-left:10px;"><el-button type="primary" icon="plus" size="small" @click="showAddDialog(0)"></el-button></span>
                        </div>
                        <div class="payments_main">
                            <el-table
                                :data="paymentsData"
                                style="width: 100%"
                                @expand="showReturn">
                                <el-table-column type="expand">
                                    <template scope="props">
                                        <template v-if="returnData.length>0">
                                            <div>
                                                <el-table
                                                    :data="returnData"
                                                    style="width: 100%">
                                                    <el-table-column
                                                        prop="rTxId"
                                                        label="Tx ID">
                                                        <template scope="scope">
                                                            <span>
                                                                <a :href="payurl[(coin.toLowerCase())]+scope.row.rTxId" target="_blank">{{scope.row.rTxId}}</a>
                                                            </span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="rOperator"
                                                        label="归还人">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="rFrom"
                                                        label="来自">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="rTo"
                                                        label="转往">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="balance"
                                                        label="金额">
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="归还时间">
                                                        <template scope="scope">
                                                            <span>{{api.dateFormat(scope.row.rTimeStamp,"yyyy-MM-dd hh:mm:ss")}}</span>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div style="padding:10px;margin:10px;">未归还</div>
                                        </template>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="Tx ID">
                                    <template scope="scope">
                                        <span>
                                            <a :href="payurl[(coin.toLowerCase())]+scope.row.sTxId" target="_blank">{{scope.row.sTxId}}</a>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="owner"
                                    label="借币人">
                                </el-table-column>
                                <el-table-column
                                    prop="sFrom"
                                    label="来自">
                                </el-table-column>
                                <el-table-column
                                    prop="sTo"
                                    label="转往">
                                </el-table-column>
                                <el-table-column
                                    prop="balance"
                                    label="金额">
                                </el-table-column>
                                <el-table-column
                                    label="时间">
                                    <template scope="scope">
                                        {{api.dateFormat(scope.row.sTimeStamp,"yyyy-MM-dd hh:mm:ss")}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="备注">
                                    <template scope="scope">
                                        {{scope.row.comments}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    class-name="btnscol">
                                    <template scope="scope">
                                        <template v-if="scope.row.isReturned==0">
                                            <div>
                                                <el-button type="danger" @click="delItem(scope.row.id)">删除</el-button>
                                            </div>
                                            <div style="margin-top:10px;">
                                                <el-button type="info" @click="showAddDialog(1,scope.row.sTo,scope.row.sFrom,scope.row.balance,scope.row.id)">归还</el-button>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <span>已归还</span>
                                        </template>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </transition>
            <div class="add_wrap">
                <el-dialog
                    :title="dialogTitle"
                    :visible.sync="showAdd"
                    size="small"
                    top="10%"
                    :close-on-click-modal="false">
                    <div class="each_add">
                        <span class="add_lb">Tx&nbsp;ID:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addTxid" icon="close" :on-icon-click="clearAddTxid"></el-input>
                        </span>
                    </div>
                    <div class="each_add" v-show="isReturnPay==0">
                        <span class="add_lb">借币人:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addPerson" icon="close" :on-icon-click="clearAddPerson"></el-input>
                        </span>
                    </div>
                    <div class="each_add" v-show="isReturnPay==1">
                        <span class="add_lb">归还人:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addReturnPer" icon="close" :on-icon-click="clearAddReturnPer"></el-input>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb">来自:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addFrom" icon="close" :on-icon-click="clearAddFrom"></el-input>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb">转往:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addTo" icon="close" :on-icon-click="clearAddTo"></el-input>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb">金额:&nbsp;</span>
                        <span class="add_input">
                            <el-input v-model="addBalance" icon="close" :on-icon-click="clearAddBalance"></el-input>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb">日期:&nbsp;</span>
                        <span class="add_input">
                            <el-date-picker
                                v-model="addDate"
                                type="date"
                                :picker-options="dateOptions">
                            </el-date-picker>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb">时间:&nbsp;</span>
                        <span class="add_input">
                            <el-time-picker
                                v-model="addTime">
                            </el-time-picker>
                        </span>
                    </div>
                    <div class="each_add">
                        <span class="add_lb" style="vertical-align:top;">备注:&nbsp;</span>
                        <span class="add_input">
                            <el-input
                                type="textarea"
                                :row="2"
                                v-model="addDescription">
                            </el-input>
                        </span>
                    </div>
                    <div style="margin-top:29px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="showAdd = false">取消</el-button>
                            <el-button @click="clearData(true)">重置</el-button>
                            <el-button type="primary" @click="addPayment()" :disabled="!(addTxid && addFrom && addTo && addBalance && addDate && addTime)">确定</el-button>
                        </span>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    let tempdata = [];
    export default {
        name: "balance",
        data() {
            return {
                showData: [],
                historyData: [],
                hisDetail: [],
                activeHistory: [],
                paymentsData: [],
                showloading: true,
                coin: "",
                choosecoin: "",
                showDetail: false,
                showAdd: false,
                addTxid: "",
                addPerson: "",
                addReturnPer: "",
                addFrom: "",
                addTo: "",
                addBalance: "",
                addDate: "",
                addTime: "",
                addDescription: "",
                dateOptions: {},
                allowSub: true,
                dialogTitle: "",
                isReturnPay: 0,
                returnId: "",
                returnData: [],
                payurl: {
                    eth: "https://etherscan.io/tx/",
                    etc: "http://gastracker.io/tx/",
                    exp: "http://www.expanse.tech/explorer/tx/",
                    zec: "https://explorer.zcha.in/transactions/",
                    sia: "https://explore.sia.tech/hash.html?hash="
                }
            }
        },
        methods: {
            detailCoin: function(cointype) {
                let that = this;
                that.coin = cointype;
                that.paymentsData = [];
                that.historyData = [];
                that.hisDetail = [];
                that.clearData();
                that.showDetail = true;
                that.getHistory();
                that.getPayments();
            },
            paymentsCoin: function(cointype) {
                let that = this;
                that.coin = cointype;
            },
            showAddDialog: function(isAdd, sf, st, bal, rId) {
                this.clearData();
                if(isAdd == 0) {
                    this.isReturnPay = 0;
                    this.dialogTitle = "添加转账记录";
                } else {
                    this.isReturnPay = 1;
                    this.returnId = rId;
                    this.dialogTitle = "添加归还记录";
                    this.addFrom = sf;
                    this.addTo = st;
                    this.addBalance = bal;
                    this.addDate = (new Date());
                    this.addTime = (new Date());
                }
                this.showAdd = true;
            },
            getHistory: function() {
                this.historyData = [];
                let that = this;
                let historyTemp = [];
                let reqUrl = "rewardHistory/" + that.coin.toLowerCase() + "/weeklySummary";
                that.api.get({
                    url: reqUrl,
                    data:{},
                    callback: function(data) {
                        if((data.code == 0) && (data.data)) {
                            for(var i = 0; i < data.data.length; i ++) {
                                if(data.data[i]) {
                                    historyTemp.push({
                                        date: data.data[i].time,
                                        balance: data.data[i].balance,
                                        payBalance: data.data[i].payBalance,
                                        revenuePps: data.data[i].rewardHistory.revenuePps,
                                        revenuePplns: data.data[i].rewardHistory.revenuePplns,
                                        revenueDiff: data.data[i].rewardHistory.revenueDiff,
                                        poolFee: data.data[i].rewardHistory.poolFree,
                                        realDiff: data.data[i].realDiff
                                    });
                                }
                            }
                            historyTemp.sort(function(a, b){
                                return ((b.date > a.date) ? (1) : (-1));
                            });
                            that.historyData = historyTemp.slice(0);
                        }
                    }
                });
            },
            changeHistory: function(exprow, expanded) {
                if(!(exprow && exprow.date && expanded)) return;
                this.hisDetail = [];
                let that = this;
                let reqUrl = "rewardHistory/" + that.coin.toLowerCase() + "/list?date=" + exprow.date;
                that.api.get({
                    url: reqUrl,
                    data: {},
                    callback: function(data) {
                        if((data.code==0) && (data.data)) {
                            that.hisDetail = data.data.slice(0);
                        }
                    }
                });
            },
            getPayments: function() {
                let that = this;
                let reqUrl = "transactionHistory/" + that.coin.toLowerCase() + "/list";
                that.api.get({
                    url: reqUrl,
                    data: {},
                    callback: function(data) {
                        if((data.code == 0) && (data.data)) {
                            that.paymentsData = data.data.slice(0);
                        }
                    }
                });
            },
            addPayment: function() {
                let that = this;
                if(that.isReturnPay) {
                    var reqUrl = "transactionHistory/" + that.coin.toLowerCase() + "/return";
                } else {
                    var reqUrl = "transactionHistory/" + that.coin.toLowerCase() + "/add";
                }
                let tempTime = that.addDate;
                let hh = that.addTime.getHours();
                let mm = that.addTime.getMinutes();
                let ss = that.addTime.getSeconds();
                tempTime.setHours(hh);
                tempTime.setMinutes(mm);
                tempTime.setSeconds(ss);
                if(!that.allowSub) return;
                that.allowSub = false;
                if(that.isReturnPay) {
                    var rdata = {
                        id: that.returnId,
                        rTxId: that.addTxid,
                        rOperator: that.addReturnPer,
                        rFrom: that.addFrom,
                        rTo: that.addTo,
                        balance: that.addBalance,
                        rTimeStamp: (tempTime.getTime()),
                        timestamp: ((new Date()).getTime()),
                        comments: that.addDescription,
                        isReturned: "1"
                    };
                } else {
                    var rdata = {
                        sTxId: that.addTxid,
                        owner: that.addPerson,
                        sFrom: that.addFrom,
                        sTo: that.addTo,
                        balance: that.addBalance,
                        sTimeStamp: (tempTime.getTime()),
                        timestamp: ((new Date()).getTime()),
                        comments: that.addDescription
                    };
                }
                that.api.post({
                    url: reqUrl,
                    data: rdata,
                    callback: function(data) {
                        if(data.code == 0) {
                            alert("成功!");
                            that.showAdd = false;
                            that.clearData();
                            that.getPayments();
                        } else {
                            alert("失败!");
                        }
                        that.allowSub = true;
                    },
                    failback: function() {
                        alert("Some error!");
                        that.allowSub = true;
                    }
                });
            },
            getData: function() {
                let that = this;
                let reqUrl = "adminPage/balance";
                that.api.get({
                    url: reqUrl,
                    data: {},
                    callback: function(data) {
                        if((data.code == 0) && (data.data)) {
                            tempdata = data.data;
                            for(var i in tempdata) {
                                that.showData.push({
                                    cointype: (i.toUpperCase()),
                                    pwbalance: tempdata[i].real_payout_wallet,
                                    wbalance: tempdata[i].real_miner_wallet,
                                    unbalance: tempdata[i].real_rds_need_pay,
                                    poolfeebalance: tempdata[i].poolfee_balance,
                                    needpaidbalance: tempdata[i].snapshoot
                                });
                            }
                        }
                        that.showloading = false;
                    },
                    failback: function() {
                        that.showloading = false;
                    }
                });
            },
            clearData: function(type) {
                this.showAdd = type;
                this.addTxid = "";
                this.addFrom = "";
                this.addTo = "";
                this.addBalance = "";
                this.addDate = "";
                this.addTime = "";
                this.addDescription = "";
                this.activeHistory = [];
            },
            delItem: function(itemId) {
                let that = this;
                let r = confirm("确认删除?");
                if(!r) return;
                if(r && that.allowSub) {
                    that.allowSub = false;
                    that.api.del({
                        url: ("transactionHistory/"+that.coin.toLowerCase()+"/"+itemId),
                        data: {},
                        callback: function(data) {
                            if(data.code == 0) {
                                that.getPayments();
                                that.allowSub = true;
                            }
                        },
                        failback: function() {
                            that.allowSub = false;
                        }
                    });
                }
            },
            getScopeArr: function(o) {
                let arr = [];
                arr.push(o);
                //console.log(arr);
                return arr;
            },
            showReturn: function(row, expanded) {
                this.returnData = [];
                if(row.isReturned == 1) {
                    this.returnData.push(row);
                }
            },
            clearAddTxid: function(ev) {
                this.addTxid = "";
            },
            clearAddFrom: function(ev) {
                this.addFrom = "";
            },
            clearAddTo: function(ev) {
                this.addTo = "";
            },
            clearAddBalance: function(ev) {
                this.addBalance = "";
            },
            clearAddPerson: function(ev) {
                this.addPerson = "";
            },
            clearAddReturnPer: function(ev) {
                this.addReturnPer = "";
            }
        },
        mounted: function() {
            this.getData();
        },
        components: {
            topnav
        }
    }
</script>
<style>
    .balance_page .el-table th>.cell {
        text-align: center;
    }
    .balance_page .maindata .tbwrap {
        margin: 25px;
    }
    .balance_page .history_wrap,.balance_page .payments_wrap {
        margin: 20px 0px;
        border: 1px solid #dfe6ec;
    }
    .balance_page .tits {
        margin: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #9c9c9c;
    }
    .balance_page .history_main,.balance_page .payments_main {
        margin: 20px 15px;
    }
    .balance_page .detail_wrap {
        margin: 0px 15px;
    }
    .balance_page .each_add>span {
        display: inline-block;
        margin-right: 5px;
    }
    .balance_page .add_lb {
        width: 60px;
        text-align: right;
    }
    .balance_page .each_add {
        margin: 10px 0px;
    }
    .balance_page a {
        color: #276ab0;
        text-decoration: none;
    }
    .balance_page .each_i {
        font-size: 14px;
    }
    .balance_page .i_label {
        padding-left: 15px;
    }
    .balance_page .i_value {
        padding-right: 15px;
        border-right: 1px solid #000000;
    }
    .balance_page .add_input {
        min-width: 300px;
    }
    .balance_page .add_input .el-date-editor {
        min-width: 300px;
    }
</style>
